<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="layout" content="stmain"/>
  <link rel="stylesheet" href="${resource(dir: 'css', file: 'create.css')}" type="text/css"/>
  <link rel="stylesheet" href="${resource(dir: 'css', file: 'list.css')}" type="text/css"/>
  <link rel="stylesheet" href="${resource(dir: 'css/custom-theme', file: 'jquery-ui-1.8.18.custom.css')}" type="text/css"/>
  <g:javascript src="jquery-1.7.1.min.js"/>
  <g:javascript src="jquery-ui-1.8.20.custom.min.js"/>
  <g:javascript src="date.format.min.js"/>
  <g:javascript src="wizard.js"/>
  <title>SimTester - Run a Test</title>
</head>
<body>
  <h2>Run a test suite</h2>
  <g:if test="${testsuites.isEmpty()}">
    <p class="noitems">You have not created any test suites. Click <a id="add-suite" href="#">here</a> to create one.</p>
  </g:if>
  <g:else>
  <g:img id="add-suite" class="toolboximg" title="Create new test suite" dir="images" file="add.png"/>
  <g:img id="del-suite" class="toolboximg" title="Delete test suite" dir="images" file="Remove.png"/>
  <g:img id="edit-ts" class="toolboximg" title="Edit test suite" dir="images" file="edit.png"/>
  <g:form name="runform" controller="testRun" action="create">
    <div class="tablepagination">
    <table class="sttable" id="runtable" >
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>ID</th>
          <g:sortableColumn property="name" title="Name"/>
          <g:sortableColumn property="type" title="Type"/>
          <g:each in="${catlist}" var="name">
            <g:sortableColumn property="${name}" title="${name.capitalize()}"/>
          </g:each>
          <g:sortableColumn property="owner" title="Owner"/>
          <g:sortableColumn property="dateCreated" title="Date Created"/>
        </tr>
      </thead>
      <tbody>
        <g:each in="${testsuites}" var="ts" status="i">
          <tr>
            <g:if test="${i == 0}">
              <td><g:radio name="testsuite" value="${ts.id}" checked="true"/></td>
            </g:if>
            <g:else>
              <td><g:radio name="testsuite" value="${ts.id}"/></td>
            </g:else>
            <td>${ts.id}</td>
            <td>${ts.name}</td>
            <td>${ts.type}</td>
            <g:each in="${catlist}" var="name">
              <g:if test="${ts.findCatValue(name)}">
                <td>${ts.findCatValue(name)}</td>
              </g:if>
              <g:else>
                <td>&nbsp;</td>
              </g:else>
            </g:each>
            <td>${ts.owner.username}</td>
            <td><g:formatDate date="${ts.dateCreated}" format="MM/dd/yyyy HH:mm:ss"/></td>
          </tr>
        </g:each>
      </tbody>
    </table>
    <div class="pagination">
		<g:paginate prev="&#8592; Previous" next="Next &#8594;" maxsteps="2" max="10" controller="testSuite" action="list" total="${testsuitescount}" />
    </div>
    </div>

    <div>
      <input class="button green" name="runtest" type="submit" value="Run"/>
  	</div>
  </g:form>
  
  <!--
  <div id="gui-wizard">
    <fieldset>
      <p>Choose a name for your test execution</p><br/>
      <g:textField name="trname"/>
    </fieldset>
    <fieldset>
      <p>Choose the number of users per test</p><br/>
      <table class="sttable">
        <thead>
          <tr>
            <th>Test Case</th>
            <th>Users</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </fieldset>
    <fieldset>
      <p>Repeat these tests by:</p>
      <div id="repeat-choice">
        <div class="choice">
          <g:radio name="repeat" value="count" checked="yes"/> <label for="repeat">Count:</label>
          <div id="count">
            <g:textField name="repeatcount" size="2" value="1"/> times
          </div>
        </div>
        <div class="choice">
          <input type="radio" id="duration-radio" name="repeat" value="duration"/> <label for="duration-radio">Duration:</label>
          <div id="duration">
            <input type="number" name="hours" size="2" value="1"/> hours,
            <input type="number" name="mins" size="2" value="0"/> mins,
            <input type="number" name="secs" size="2" value="0"/> seconds
          </div>
        </div>
      </div>
    </fieldset>
  </div>

  <div id="load-wizard">
    <fieldset>
      <p>Choose a name for your test execution</p><br/>
      <input type="text" name="trname" value=""/>
    </fieldset>
    <fieldset>
      <p>Choose the load for test <b></b></p>
      <table class="sttable">
        <thead>
          <tr>
            <th>Phase</th>
            <th>Number of users</th>
            <th>Duration</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>
              Increase by <input type="number" name="users" size="2" value="1"/> users every
              <input type="number" name="permin" size="2" value="1"/> mins,
              <input type="number" name="persec" size="2" value="0"/> seconds
            </td>
            <td>
              <select name="hours"></select>:<select name="mins"></select>:<select name="secs"></select>
            </td>
          </tr>
        </tbody>
      </table>
    </fieldset>
  </div> -->
  
  <div id="suiteinfo">
    <h3></h3><br/>
    <g:img id="add-test" class="toolboximg" title="Add test to suite" dir="images" file="add.png"/>
    <g:img id="del-test" class="toolboximg" title="Delete test from suite" dir="images" file="Remove.png"/>
    <table class="sttable">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>ID</th>
          <th>Name</th>
          <th>Type</th>
          <g:each in="${catlist}" var="name">
  	 		<th>${name.capitalize()}</th>
          </g:each>
          <th>Owner</th>
          <th>Date Created</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
  
  </g:else>
  
  <div id="add-test-dialog" title="Add a test case">
    <div id="addtest-box">
    <table class="sttable">
      <thead>
        <tr>
          <th>&nbsp;</th>
          <th>ID</th>
          <th>Name</th>
          <th>Type</th>
          <g:each in="${catlist}" var="name">
  	 		<th>${name.capitalize()}</th>
          </g:each>
          <th>Owner</th>
          <th>Date Created</th>
        </tr>
      </thead>
      <tbody>
        <g:each in="${testcases}" var="tc" status="i">
          <tr>
            <td><g:checkBox name="testcase" value="${tc.id}" checked="false"/></td>
            <td>${tc.id}</td>
            <td>${tc.name}</td>
            <td>${tc.type}</td>
            <g:each in="${catlist}" var="name">
              <g:if test="${tc.findCatValue(name)}">
                <td>${tc.findCatValue(name)}</td>
              </g:if>
              <g:else>
                <td>&nbsp;</td>
              </g:else>
            </g:each>
            <td>${tc.owner.username}</td>
            <td><g:formatDate date="${tc.dateCreated}" format="MM/dd/yyyy HH:mm:ss"/></td>
          </tr>
        </g:each>
      </tbody>
    </table>
    </div>
  </div>
  
  <div id="add-suite-dialog" title="Create a new test suite">
    <g:form name="addsuiteform" controller="testSuite" action="create">
      <div>
        <label>Name</label><br/>
        <input type="text" name="name"/>
      </div><br/>
      <div>
        <label>Type</label><br/>
        <g:select name="type" from="${types}"/>
      </div><br/>
      <p>Include these tests in the suite:</p>
      <div id="addsuite-box">
        <table class="sttable" id="addsuite-table">
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>ID</th>
              <th>Name</th>
              <th>Type</th>
              <g:each in="${catlist}" var="name">
	   	 		<th>${name.capitalize()}</th>
			  </g:each>
			  <th>Owner</th>
			  <th>Date Created</th>
            </tr>
          </thead>
          <tbody>
            <g:each in="${testcases}" var="tc" status="i">
              <tr>
                <td><g:checkBox name="testcase" value="${tc.id}" checked="false"/></td>
                <td>${tc.id}</td>
                <td>${tc.name}</td>
                <td>${tc.type}</td>
                <g:each in="${catlist}" var="name">
                  <g:if test="${tc.findCatValue(name)}">
                    <td>${tc.findCatValue(name)}</td>
                  </g:if>
                  <g:else>
                    <td>&nbsp;</td>
                  </g:else>
                </g:each>
                <td>${tc.owner.username}</td>
                <td><g:formatDate date="${tc.dateCreated}" format="MM/dd/yyyy HH:mm:ss"/></td>
              </tr>
            </g:each>
          </tbody>
        </table>
      </div>
      
      <input style="display:none;" class="button green" type="submit" value="Add"/>
    </g:form>
  </div>
  
  <div id="edit-ts-dialog" title="Edit Test Suite">
    <g:form name="editform" controller="testSuite" action="update">
      <div id="tsholder" >
        <label>Name</label><br/>
        <input type="text" name="name"/>
        <br/><br/>
	    <g:each in="${catlist}" var="name">	
	      <div class="field">
	   	    <label>${name.capitalize()}</label><br/>
            <input type="text" id="cat" name="${name.capitalize()}"/>
          </div>
        </g:each>
	    <input style="display:none;" name="tsid" value="" />
        <input style="display:none;" class="button green" type="submit" value="Update"/>
      </div>
    </g:form>
  </div>
  
  <div id="ts-confirm-dialog" title="Confirmation">
  	<g:form name="confirmationform" controller="testSuite" action="delete">
    <div>
   	  <input style="display:none;" name="tsid" value="" />
   	  <label>Are you sure you want to delete this test suite?</label><br/><br/>
   	  <div>
   	  <label></label><br/>
   	  </div>
   	</div>
   	<input class="button green" type="submit" value="Yes"/>
    </g:form>
  </div>
  
  <g:javascript>
    var count;

    // Disable Run button if no test suite is checked
    if ( $("input:radio[name=testsuite]:checked").length <= 0 )
      disableRunButton();
    else{
      enableRunButton();
      viewTestSuite($("input:radio[name=testsuite]:checked").val());
    }
    
    $(document).ready(function() {
	  $("#ts-confirm-dialog input[value=Yes]").hide();

      $("input:radio[name=testsuite]").click(function() {
        if ( $("input:radio[name=testsuite]:checked").length > 0 ){
          enableRunButton();
          viewTestSuite($("input:radio[name=testsuite]:checked").val());
        } else {
          disableRunButton();
        }
      });

      // Change testcases in add-suite dialog
      $('#type').change(function(){
        var type = $('#type').val();
        $.getJSON('/server/query/testcases', {type: type}, function(data){
          var str = buildTcRows(data);
          $('#addsuite-table tbody').html(str);
        });
      });
      
      // Run GUI test wizard
      /*var guiwizdlg = $('#gui-wizard').wizard({
        title: "Execute a test suite",
        height: 380,
        width: 360,
        finish: function(){
          $("input[value=Run]")
            .unbind('click')
            .click();
        }
      }).parent();
      guiwizdlg.appendTo($("#runform"));*/
      
      // Run Load test wizard
      /*var loadwizdlg = $('#load-wizard').wizard({
        title: "Execute a test suite",
        height: 380,
        width: 360,
        finish: function(){
          $("input[value=Run]")
            .unbind('click')
            .click();
        }
      }).parent();
      loadwizdlg.appendTo($("#runform"));*/

      // Add suite dialog
      $("#add-suite-dialog").dialog({
        autoOpen: false,
        /*height: 300,
        width: 550,*/
        width: $('#addsuite-table').width() + 100,
        modal: true,
        buttons: [
          {
            id: "add-cancel",
            text: "Cancel",
            class: 'red button',
            click: function() {
              $(this).dialog("close");
            }
          },
          {
            id: "add-create",
            text: "Create",
            class: 'green button',
            click: function() {
              $("#add-suite-dialog input[value=Add]").click();
            }
          }
        ]
      });
      
      // Edit Test Suite Dialog
      $("#edit-ts-dialog").dialog({
        autoOpen: false,
        modal: true,
        buttons: [
          {
            id: "edit-cancel",
            text: "Cancel",
            class: 'red button',
            click: function() {
              $(this).dialog("close");
            }
          },
          {
            id: "edit-update",
            text: "Update",
            class: 'green button',
            click: function() {
            	tsname = $("#edit-ts-dialog input[name=name]").val();
				if (!tsname) {
			  		tsname = $("input[name=testsuite]:checked").parent().next().text();
					$("#editform input[name=name]").val(tsname);
				}
              $("#edit-ts-dialog input[value=Update]").click();
            }
          }
        ]
      });
      
      // Add Test Case Dialog
      $('#add-test-dialog').dialog({
        autoOpen: false,
        width: $('#add-test-dialog table').width() + 100,
        modal: true,
        buttons: [
          {
            id: "add-test-cancel",
            text: "Cancel",
            class: 'red button',
            click: function(){
              $(this).dialog("close");
            }
          },
          {
            id: "add-test-add",
            text: "Add",
            class: 'green button',
            click: function(){
              addTests();
              $(this).dialog("close");
            }
          }
        ]
      });
      
      
      // Confirmation Delete Test Suite Dialog
      $("#ts-confirm-dialog").dialog({
        autoOpen: false,
        height: 250,
        width: 350,
        modal: true,
        buttons: [
          {
            id: "del-no",
            text: "No",
            class: 'red button',
            click: function() {
              $(this).dialog("close");
            }
          },
          {
            id: "del-yes",
            text: "Yes",
            class: 'green button',
            click: function() {
              $("#ts-confirm-dialog input[value=Yes]").click();
            }
          }
        ]
      });

      $("#add-suite").click(function() {
        var type = $('#type').val();
        $.getJSON('/server/query/testcases', {type: type}, function(data){
          var str = buildTcRows(data);
          $('#addsuite-table tbody').html(str);
          $("#add-suite-dialog").dialog("open");
        });
      });
      
      $("#edit-ts").click(function() {
        var id = $("input[name=testsuite]:checked").val();
      	$("#editform input[name=tsid]").val(id);

      	var tsname = $("input[name=testsuite]:checked").parent().next().next().text();
   		$("#editform input[name=name]").val(tsname);
      	
		var category = $("input[name=testsuite]:checked").closest('tr').find('td').map(function(){
     		return $(this).text();
   		}).get();
		
		var catheader = $("#runtable").find('th').map(function(){
     		return $(this).text();
   		}).get();

		for(var i=2; i < category.length-2; i++){
		  var value = category[i];
		  if(value == '\xa0'){
		    value = '';
		  }
		  $('#tsholder div input[name=' + catheader[i] + ']').val(value);
		}
		
		$("#edit-ts-dialog").dialog("open");       
      });
      
      // Deleting a test case
      $('#del-test').click(function(){
        var todel = new Array();
        $('div#suiteinfo input[name=testcase]:checked').each(function(i){
          todel[i] = $(this);
        });
        
        var todelStr = new Array();
        for(var i in todel){
          todelStr[i] = todel[i].val();
        }
        
        // Delete
        var tsId = $("input:radio[name=testsuite]:checked").val()
        $.ajax({url: '/server/testSuite/deltc/' + tsId,
          type: "POST",
          data: {tc: todelStr},
          dataType: "json"
        });
        
        for(var i in todel){
          todel[i].parent().parent().fadeOut(function(){
            $(this).remove();
          });
        }
      });
      
      // Adding a test case
      $('#add-test').click(function(){
        var tsId = $("input:radio[name=testsuite]:checked").val()
        $.getJSON('/server/query/testcases/' + tsId, function(data){
          var str = buildTcRows(data);
          $('#add-test-dialog tbody').html(str);
          $('#add-test-dialog').dialog('open');
        });
      });
    });  //End document ready
    
    function buildTcRows(tcs){
      var str = '';
      for(var i in tcs){
        str += '<tr><td><input name="testcase" type="checkbox" value="' + tcs[i].id + '"></td>';
        str += '<td>' + tcs[i].id + '</td>';
        str += '<td>' + tcs[i].name + '</td>';
        str += '<td>' + tcs[i].type + '</td>';
        for(var j in tcs[i].cats){
          str += '<td>' + tcs[i].cats[j] + '</td>';
        }
        str += '<td>' + tcs[i].owner + '</td>';
        str += '<td>' + new Date(tcs[i].date).format('mm/dd/yyyy HH:MM:ss', true) + '</td></tr>';
      }
      return str;
    }
    
    // Delete Test Suite
    $("#del-suite").click(function(){
      $("#confirmationform div label:eq(1)").html('<b>' + $("input[name=testsuite]:checked").parent().next().next().text() + '</b>');
      $("#confirmationform input[name=tsid]").val($("input[name=testsuite]:checked").val());
      $("#ts-confirm-dialog").dialog("open");
    });
    
    function addTests(){
      var toadd = new Array();
      $('div#add-test-dialog input[name=testcase]:checked').each(function(i){
        toadd[i] = $(this).val();
      });
      
      var tsId = $("input:radio[name=testsuite]:checked").val()
      $.ajax({url: '/server/testSuite/addtc/' + tsId,
        type: "POST",
        data: {tc: toadd},
        dataType: "json",
        success: function(data){
          $('div#suiteinfo tbody').append(makeTcTable(data.tclist));
        }
      });
    }
    
    function enableRunButton() {
      $("input[value=Run]")
        .fadeTo(0, 1)
        .attr('disabled', false)
        .removeClass('disabled')
        .unbind('click')
        .click(function(e) {
          var type = $("input:radio[name=testsuite]:checked").parent().next().next().text();

          var tsId = $("input:radio[name=testsuite]:checked").val();
          $.getJSON('/server/query/testsuite/' + tsId, function(data){
            if(type == 'GUI'){
              $('div#load-wizard').remove();
              createGuiWiz();
              $('div#gui-wizard tbody').html(makeWizTcTable(data.tclist));
              $("#gui-wizard").wizard("open");
            }else{
              $('div#gui-wizard').remove();
              createLoadWiz();
              $('#load-wizard').wizard('open');
            }
          });

          e.preventDefault();
        });

      $("input[value=Edit]")
        .fadeTo(0, 1)
        .attr('disabled', false)
        .removeClass('disabled')
        .unbind('click')
        .click(function() {
          $("input[name=tsid]").val($("input[name=testsuite]:checked").val());
          $("#edit-ts-dialog").dialog("open");
        });
    }

    function disableRunButton(){
      $("input[value=Run]")
        .fadeTo(0, 0.3)
        .attr('disabled', true)
        .addClass('disabled')
        .unbind('click');
 
 		/*$("input[value=Remove]")
        .fadeTo(0, 0.3)
        .attr('disabled', true)
        .addClass('disabled')
        .unbind('click');*/
 
      $("input[value=Edit]")
        .fadeTo(0, 0.3)
        .attr('disabled', true)
        .addClass('disabled')
        .unbind('click');
    };
    
    function createGuiWiz(){
      var wizHtml = buildGuiWizHtml();
      var guiwizdlg = $(wizHtml).wizard({
        title: "Execute a test suite",
        height: 380,
        width: 360,
        finish: function(){
          $("input[value=Run]")
            .unbind('click')
            .click();
        }
      }).parent();
      guiwizdlg.appendTo($("#runform"));

      $('#runform div#gui-wizard').children('div[id*="step"]').each(function(i) {
        $("#step" + i).hide();
      });
      
      // Radio buttons for test repeat
      $("#duration").hide();
      $("input#repeat").click(function(){
        $("#count").slideDown('fast');
        $("#duration").slideUp('fast');
      });
      $("input#duration-radio").click(function(){
        $("#count").slideUp('fast');
        $("#duration").slideDown('fast');
      });
    }
    
    function buildGuiWizHtml(){
      var str = '<div id="gui-wizard"><fieldset>';
      str += '<p>Choose a name for your test execution</p><br/><input type="text" name="trname" value=""/></fieldset>';
      str += '<fieldset><p>Choose the number of users per test</p><br/>';
      str += '<table class="sttable"><thead><tr><th>Test Case</th><th>Users</th></tr></thead><tbody></tbody></table></fieldset>';
      str += '<fieldset><p>Repeat these tests by:</p>';
      str += '<div id="repeat-choice">';
      str += '<div class="choice">';
      str += '<input type="radio" name="repeat" checked="checked" value="count" id="repeat"/> <label for="repeat">Count:</label>';
      str += '<div id="count">';
      str += '<input type="text" name="repeatcount" size="2" value="1"/> times';
      str += '</div>';
      str += '</div>';
      str += '<div class="choice">';
      str += '<input type="radio" id="duration-radio" name="repeat" value="duration"/> <label for="duration-radio">Duration:</label>';
      str += '<div id="duration">';
      str += '<input type="number" name="hours" size="2" value="1"/> hours, ';
      str += '<input type="number" name="mins" size="2" value="0"/> mins, ';
      str += '<input type="number" name="secs" size="2" value="0"/> seconds';
      str += '</div></div></div></fieldset></div>';
      return str;
    }
    
    function createLoadWiz(){
      var wizHtml = buildLoadWizHtml();
      var loadwizdlg = $(wizHtml).wizard({
        title: "Execute a test suite",
        height: 420,
        width: 650,
        finish: function(){
          $("input[value=Run]")
            .unbind('click')
            .click();
        }
      }).parent();
      loadwizdlg.appendTo($("#runform"));
      
      setDurationOpts($('#load-wizard'));

      $('#runform div#load-wizard').children('div[id*="step"]').each(function(i) {
        $("#step" + i).hide();
      });
    }
    
    function setDurationOpts(elem){
      var $hours = elem.find('select[name*="hours"]');
      for(var i=0;i<=99;i++){
        $hours.append('<option value="' + i + '">' + pad(i,2) + '</option>');
      }
      
      var $mins = elem.find('select[name*="mins"]');
      for(var i=0;i<=59;i++){
        $mins.append('<option value="' + i + '">' + pad(i,2) + '</option>');
      }
      $mins.val('1');
      
      var $secs = elem.find('select[name*="secs"]');
      for(var i=0;i<=59;i++){
        $secs.append('<option value="' + i + '">' + pad(i,2) + '</option>');
      }
    }
    
    function buildLoadWizHtml(){
      var str = '<div id="load-wizard"><fieldset>';
      str += '<p>Choose a name for your test execution</p><br/><input type="text" name="trname" value=""/></fieldset>';

      var $tcs = $('#suiteinfo tbody tr');
      $tcs.each(function(i){
        var $tc = $tcs.eq(i);
        var tcId = $tc.find('input').attr('value');
        str += '<fieldset id="loadtc-' + i + '">';
        str += '<p>Choose the load for test <b>' + $tc.find('td').eq(1).text() + '</b></p>';
        str += '<table class="sttable smallerfont rowlines">';
        str += '<thead><tr><th> </th><th>Phase</th><th>Number of users</th><th>Duration</th></tr></thead>';
        str += '<tbody>';
        str += buildLoadRow(1, tcId);
        str += '</tbody>';
        str += '</table>';
        str += '<a class="smallfont" href="javascript:addLoadRow(\'loadtc-' + i + '\', \'' + tcId + '\');">Add another phase</a>';
        str += '</fieldset>';
      });

      str += '</div>';
      return str;
    }
    
    function buildLoadRow(row, tcId, delopt){
      del = false;
      if(delopt){
        del = true;
      }
      
      str = '<tr><td>';
      if(delopt){
        str += '<img class="imgbutton" title="Remove phase" src="/server/static/images/Remove.png">';
      }else{
        str += '&nbsp;';
      }
      str += '</td><td>' + row + '</td><td>';
      str += 'Increase by <input type="number" name="users-' + tcId + '" size="2" value="1"/> users every ';
      str += '<input type="number" name="permin-' + tcId + '" size="2" value="1"/> mins, ';
      str += '<input type="number" name="persec-' + tcId + '" size="2" value="0"/> seconds';
      str += '</td>';
      str += '<td><select name="hours-' + tcId + '" title="hours"></select>:<select name="mins-' + tcId + '" title="minutes"></select>:<select name="secs-' + tcId + '" title="seconds"></select></td>';
      str += '</tr>';
      return str;
    }
    
    function addLoadRow(id, tcId){
      var num = $('#' + id + ' tbody tr').length + 1;
      var html = buildLoadRow(num, tcId, true);
      var $html = $(html);
      $html.appendTo('#' + id + ' tbody');
      setDurationOpts($html);
      $html.find('img').click(function(){
        $(this).parent().parent().fadeOut(function(){
          $(this).remove();
          var $rows = $('#' + id + ' tbody tr');
          $rows.each(function(i){
            $rows.eq(i).find('td').eq(1).text(i+1);
          });
        });
      });
    }
    
    function viewTestSuite(tsId){
      $.getJSON('/server/query/testsuite/' + tsId, function(data){
        $('div#suiteinfo h3').text(data.name + ' contains these Test Cases:');
        $('div#suiteinfo tbody').html(makeTcTable(data.tclist));
      });
    }
    
    function makeWizTcTable(tclist){
      var tableStr = '';
      for(var i in tclist){
        tableStr += '<tr><td>' + tclist[i].name + '</td>';
        tableStr += '<td><input type="number" name="tc' + tclist[i].id + '" size="2" value="1"/></td>';
        tableStr += '</tr>';
      }
      return tableStr;
    }
    
    function makeTcTable(tclist){
      var tableStr = '';
      for(var i in tclist){
        tableStr += '<tr><td><input type="checkbox" name="testcase" id="testcase" value="' + tclist[i].id + '"/></td>';
        tableStr += '<td>'+ tclist[i].id +'</td>';
        tableStr += '<td>'+ tclist[i].name +'</td>';
        tableStr += '<td>'+ tclist[i].type +'</td>';
        var cats = tclist[i].cats;
        for(var j in cats){
          tableStr += '<td>'+ cats[j] +'</td>';
        }
        tableStr += '<td>'+ tclist[i].owner +'</td>';
        tableStr += '<td>'+ new Date(tclist[i].date).format('mm/dd/yyyy HH:MM:ss', true) +'</td></tr>';
      }
      return tableStr;
    }
    
    function pad(num, len){
      var str = '' + num;
      while(str.length < len){
        str = '0' + str;
      }
      return str;
    }
  </g:javascript>
</body>
</html>
